<template>
  <div>
     <div>姓名：{{ student.name }}</div>
     <div>年龄：{{ student.age }} <button @click="student.age++">+</button></div>
     <div>成绩: <input type="text" v-model="student.score"> </div>
  </div>
</template>
<!-- 
  vue3监听reactive变量
  watch(reactive变量,(newval,oldaval)=>{},配置对象)
 -->
<script lang='ts' setup>
import {reactive,watch,computed} from 'vue'
interface StudentType{
  name:string
  age:number
  score:number
}
const student=reactive<StudentType>({
  name:'张三',
  age:20,
  score:60
})
watch(student,(newval,oldval)=>{
  console.log('newval',newval);
  console.log('oldval',oldval);
},{
  immediate:true
})
</script>

<style lang='scss' scoped>
</style>